<template>
    <h1>{{username}}</h1>
    <h1>{{count}}</h1>
    <h1>{{arr}}</h1> 
    <button @click="reset">点击重置</button>
    <button @click="update">点击修改</button> 
</template>
<script setup>
// 直接引入store就可以了
import {useUser} from "../store/users"
import {storeToRefs} from "pinia"
let userStore = useUser() 
console.log(userStore.username);

// 解构state，会丢失它的响应性，使用storeToRefs来保持响应性
let {username,count,arr} =storeToRefs(userStore)

console.log(username);

// 修改pinia的状态3种方式
    // 1.直接修改 2.$patch 3.action

    // 1.state状态可以直接更改，同时修改多个状态的时候，性能比较低
    setTimeout(() => {
        // userStore.username ='韩梅梅'
        // 修改解构了的state的语法
        username.value='李雷'
        // count++
        // arr.push(10)
    }, 2000);

    // 2.需要多次修改时，使用$patch来修改状态，这种修改方式可以提高性能
    // 这种写法对于复杂的类型来说，数据不好处理，因为添加一个新的数据的时候，
    // 需要把原来的数据和新的数据合并，比较麻烦
    let update=()=>{
        // userStore.$patch({
        //     username:'关羽'+count.value,
        //     count:count.value+1,
        // })

        // $patch优化,可以直接传函数
            userStore.$patch((state)=>{
            state.username='内马尔'
            state.count = state.count+20;
            state.arr.push(state.count)
        })
    }
    console.log(userStore.username);

// 重置状态
let reset = ()=>{
    userStore.$reset()
}

// 订阅状态
// 与常规的 watch()相比，使用 $subscribe()的优点是:
    //subscriptions 只会在 patches 之后触发一次
userStore.$subscribe((mutation,state)=>{
    console.log(state);
    console.log('mutation===',mutation);
})
</script>